<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="./img/logo.png" />
    <title>使用示例</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <style>
      body {
        padding: 10px;
        min-width: 300px;
        margin: 0;
        overflow-y: auto;
      }
      :not(:root):fullscreen::backdrop {
        background-color: #fff;
      }
      a {
        margin-right: 10px;
      }
      main div {
        padding: 10px 0;
      }
      p {
        color: #f00;
      }
      main div button {
        margin-left: 10px;
      }
      .xcx {
        position: fixed;
        bottom: 100px;
        right: 100px;
        font-size: 15px;
        text-align: center;
        z-index: -1;
        min-width: 180px;
        opacity: 1;
        transition: all 0.3s;
      }
      .xcx img {
        width: 150px;
        height: 150px;
        margin-bottom: 10px;
      }
      @media screen and (max-width: 500px) {
        .xcx {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <a href="https://npmmirror.com/package/js-useful-tools" target="_blank"
      >cnpm官网</a
    >
    <a href="https://www.npmjs.com/package/js-useful-tools" target="_blank"
      >npm官网</a
    >
    <a href="https://gitee.com/kangleyunju/js_useful_tools" target="_blank"
      >gitee源码</a
    >
    <a href="https://github.com/kangleyunju/js_useful_tools" target="_blank"
      >github源码</a
    >
    <p>
      提示：点击按钮触发事件，F12打开控制台可查看结果，详细使用方法可以鼠标右键查看网页源码
    </p>
    <div class="xcx" v-if="isPc">
      <img src="./img/xcx.png" />
      <div>微信扫一扫，体验小程序</div>
    </div>
    <script type="module">
      import * as global from "./index.js";
      const map = {
        createToken: {
          desc: "生成随机位数位token",
          fn: () => console.log(global.createToken("8")),
        },
        checkWeb: {
          desc: "验证网址",
          fn: () => console.log(global.checkWeb("https://www.baidu.com")),
        },
        checkEmail: {
          desc: "验证邮箱",
          fn: () => console.log(global.checkEmail("123456@qq.com")),
        },
        checkTelephone: {
          desc: "验证手机号",
          fn: () => console.log(global.checkTelephone("13012345678")),
        },
        checkCarNumber: {
          desc: "验证车牌号",
          fn: () => console.log(global.checkCarNumber("沪A12345D")),
        },
        dayDiff: {
          desc: "两个日期间隔天数",
          fn: () => console.log(global.dayDiff("2022-09-08", "2023-01-09")),
        },
        downloadFile: {
          desc: "下载文件",
          fn: () =>
            global.downloadFile(
              "https://pic.imgdb.cn/item/651eb85ac458853aef498f5c.jpg",
              "图片名称"
            ),
        },
        fileToBlobUrl: {
          desc: "文件转blob",
          fn: () => {
            const input = document.createElement("input");
            input.type = "file";
            input.addEventListener("change", async () => {
              const file = input.files[0];
              console.log(await global.fileToBlobUrl(file));
            });
            input.click();
          },
        },
        fileToBase64: {
          desc: "文件转base64",
          fn: () => {
            const input = document.createElement("input");
            input.type = "file";
            input.addEventListener("change", async () => {
              const file = input.files[0];
              console.log(await global.fileToBase64(file));
            });
            input.click();
          },
        },
        urlToBase64: {
          desc: "链接转base64",
          fn: async () => {
            console.log(
              await global.urlToBase64(
                "https://pic.imgdb.cn/item/651eb85ac458853aef498f5c.jpg"
              )
            );
          },
        },
        base64ToBlobUrl: {
          desc: "base64转blob链接",
          fn: async () => {
            console.log(
              await global.base64ToBlobUrl(
                ""
              )
            );
          },
        },
        base64ToBlob: {
          desc: "base64转blob对象",
          fn: async () => {
            console.log(
              await global.base64ToBlob(
                ""
              )
            );
          },
        },
        setStorage: {
          desc: "添加缓存",
          fn: () => {
            global.setStorage("testKey", 1);
            console.log(1);
          },
        },
        getStorage: {
          desc: "获取缓存",
          fn: () => {
            console.log(global.getStorage("testKey"));
          },
        },
        removeStorage: {
          desc: "删除缓存",
          fn: () => global.removeStorage("testKey"),
        },
        shake: {
          desc: "震动",
          fn: () => {
            global.shake("1000");
            console.log("请在手机上尝试");
          },
        },
        copyText: {
          desc: "复制文本",
          fn: () => global.copyText("npm install js-useful-tools"),
        },
        checkIsMobile: {
          desc: "检查设备是否手机",
          fn: () => console.log(global.checkIsMobile()),
        },
        arraySort: {
          desc: "数组排序",
          fn: () =>
            console.log(
              global.arraySort([{ val: 1 }, { val: 3 }, { val: 2 }], 2, "val")
            ),
        },
        debounce: {
          desc: "防抖",
          fn: global.debounce(() => {
            console.log("用户结束操作1秒后执行,比如实时搜索");
          }, 1000),
        },
        throttle: {
          desc: "节流",
          fn: global.throttle(() => {
            console.log("1秒执行一次操作,比如提交事件");
          }, 1000),
        },
        arrayRandom: {
          desc: "从数组中随机取一个数",
          fn: () => console.log(global.arrayRandom([1, 2, 3])),
        },
        encodeStr: {
          desc: "字符串加密",
          fn: () => console.log(global.encodeStr("js_useful_tools")),
        },
        decodeStr: {
          desc: "字符串解密",
          fn: () => console.log(global.decodeStr("yÝÒÔèØËÛáËÓãÞÛß")),
        },
        stampToTime: {
          desc: "时间戳转年月日",
          fn: () => console.log(global.stampToTime(1681880376569)),
        },
        isLeapYear: {
          desc: "是否闰年",
          fn: () => console.log(global.isLeapYear(2022)),
        },
        deepClone: {
          desc: "深拷贝",
          fn: () => {
            let aa = [1, 2, 3];
            let bb = global.deepClone(aa);
            aa[0] = 9;
            console.log("bb", bb);
          },
        },
        rgbToHex: {
          desc: "rgb颜色转16进制",
          fn: () => {
            console.log("rgb(74,145,230)", global.rgbToHex("rgb(74,145,230)"));
            console.log(
              "rgba(74,145,230,0.5)",
              global.rgbToHex("rgba(74,145,230,0.5)")
            );
          },
        },
        hexToRgb: {
          desc: "16进制颜色转rgb",
          fn: () => console.log(global.hexToRgb("#4a91e6", 0.5)),
        },
        getJsType: {
          desc: "获取js类型",
          fn: () => console.log(global.getJsType(null)),
        },
        getStamp: {
          desc: "获取各个日期时间戳",
          fn: () => {
            console.log("当前时间戳", global.getStamp());
            console.log("今日0点时间戳", global.getStamp("today"));
            console.log("明天0点时间戳", global.getStamp("tomorrow"));
            console.log("本月0点时间戳", global.getStamp("month"));
            console.log("本年0点时间戳", global.getStamp("year"));
            console.log("任意天数0点时间戳", global.getStamp(100));
          },
        },
        exportJson: {
          desc: "导出json",
          fn: () => global.exportJson([{ id: 1 }, { id: 2 }], "文件名称"),
        },
        importJson: {
          desc: "导入json",
          fn: () => {
            const input = document.createElement("input");
            input.type = "file";
            input.accept = ".json";
            input.addEventListener("change", async () => {
              const file = input.files[0];
              console.log(await global.importJson(file));
            });
            input.click();
          },
        },
        fullScreen: {
          desc: "元素全屏",
          fn: () => global.fullScreen(),
        },
        urlToFile: {
          desc: "url转file",
          fn: async () => {
            console.log(
              await global.urlToFile(
                "https://pic.imgdb.cn/item/651eb85ac458853aef498f5c.jpg"
              )
            );
          },
        },
        isUrlAble: {
          desc: "url是否有效",
          fn: async () => {
            console.log(
              await global.isUrlAble(
                "https://c2.monidai.com/20221007/Hn3UhoLV/index.m3u8"
              )
            );
          },
        },
        getVideoPoster: {
          desc: "获取视频封面",
          fn: async () => {
            const input = document.createElement("input");
            input.type = "file";
            input.accept = ".mp4";
            input.addEventListener("change", async () => {
              const file = input.files[0];
              console.log(await global.getVideoPoster(file, 300));
            });
            input.click();
          },
        },
        compressImg: {
          desc: "图片压缩",
          fn: async () => {
            const input = document.createElement("input");
            input.type = "file";
            input.accept = ".png,.jpg,.jpeg";
            input.addEventListener("change", async () => {
              const file = input.files[0];
              console.log(await global.compressImg(file, 300));
            });
            input.click();
          },
        },
        formatSeconds: {
          desc: "秒数转时分秒",
          fn: () => {
            console.log(global.formatSeconds(12345));
          },
        },
        getFileSize: {
          desc: "获取文件大小",
          fn: () => {
            const input = document.createElement("input");
            input.type = "file";
            input.addEventListener("change", async () => {
              const file = input.files[0];
              console.log(global.getFileSize(file.size));
            });
            input.click();
          },
        },
      };
      //渲染页面
      Object.keys(map).forEach((item, index) => {
        let main = document.createElement("main");
        document.querySelector("body").appendChild(main);
        let div = document.createElement("div");
        let span = document.createElement("span");
        span.innerHTML = index + 1 + "." + item;
        div.appendChild(span);
        let button = document.createElement("button");
        button.id = item;
        button.innerHTML = map[item].desc;
        div.appendChild(button);
        main.appendChild(div);
      });
      //点击事件
      document.addEventListener("click", function (e) {
        const id = e.target.id;
        if (map[id]) {
          console.log(e.target.innerText);
          map[id].fn();
        }
      });
    </script>
  </body>
</html>
